<template>
	<el-card>
		<el-row :gutter="20">
			<el-col :span="7" :offset="0">
				<el-input v-model="queryForm.query" placeholder="查找的货品号" />
			</el-col>
			<el-button type="primary" size="default" icon="ele-Right" style="margin: 1px 0px" @click="initGetgoodsList">搜索</el-button>
		</el-row>
	</el-card>
	<el-button type="primary" size="default" icon="ele-Plus" style="margin: 10px 1px" @click="handleDialog">添加</el-button>

	<el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="gid" label="货品号" width="180" text-align="content-center" />
		<el-table-column prop="Category" label="商品类别" />
		<el-table-column prop="num" label="商品数量/箱" width="180" />
		<el-table-column prop="car" label="运输车辆" />
		<el-table-column prop="State" label="商品是否入库"/>
		<el-table-column prop="" label="操作" width="320" #default="{ row }">
			<el-button type="primary" icon="ele-Edit" plain @click="updateDia(row)" :disabled="row.State">编辑</el-button>
			<el-button type="danger" icon="ele-Delete" plain @click="delgoods(row)" :disabled="row.State">删除</el-button>
			<el-button type="success" icon="ele-Check" plain @click="addtofirst(row)" :disabled="row.State">入库</el-button>
		</el-table-column>
	</el-table>
	<el-pagination
		v-model:currentPage="queryForm.pagenum"
		v-model:page-size="queryForm.pagesize"
		:page-sizes="[2, 3, 4]"
		:small="false"
		:disabled="false"
		:background="false"
		layout=" prev, pager, next, jumper,->,total,"
		:total="total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	/>
	<!-- 添加商品表单 -->
	<el-dialog v-model="dialogFormVisible" title="添加商品">
		<el-form :model="form">
			<el-form-item label="货物编号" :label-width="formLabelWidth">
				<el-input v-model="form.gid" />
			</el-form-item>
			<el-form-item label="货物数量" :label-width="formLabelWidth">
				<el-input v-model="form.num" />
			</el-form-item>
			<el-form-item label="运输车牌" :label-width="formLabelWidth">
				<el-input v-model="form.car" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleDialog">取消</el-button>
				<el-button type="primary" @click="initaddgoods">确定</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 修改商品表单 -->
	<el-dialog v-model="dialogUp" title="修改商品">
		<el-form :model="form">
			<el-form-item label="货物数量" :label-width="formLabelWidth">
				<el-input v-model="form.num" />
			</el-form-item>
			<el-form-item label="运输车牌" :label-width="formLabelWidth">
				<el-input v-model="form.car" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="updategoods">确定</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 删除商品弹窗 -->
	<el-dialog v-model="dialogVisible" title="删除信息" width="30%">
		<span>将永久删除该信息且无法撤销该操作是否确认？</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="delG">确认</el-button>
			</span>
		</template>
	</el-dialog>
	<!-- 货物入库弹窗 -->
	<el-dialog v-model="addtodeport" title="Shipping address">
		<el-form :model="add">
			<el-form-item label = "仓储信息编号" :label-width="formLabelWidth">
				<el-input v-model="add.sid" autocomplete="on" />
			</el-form-item>
			<el-form-item label="货物存储仓库编号" :label-width="formLabelWidth">
				<el-select v-model="add.did" placeholder="Please select a zone">
					<el-option v-for="item in options" :key="item.did" :label="item.did" :value="item.did" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addtodeport = false">Cancel</el-button>
				<el-button type="primary" @click="addto">Confirm</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { getGoods, addGoods, upGoods, deGoods } from '/@/api/goods/index';
import { addDeport } from '/@/api/deport';

export default defineComponent({
	name: 'goods',
	setup() {
		const tableData = ref([]);
		const queryForm = ref({
			query: '',
			pagenum: 1,
			pagesize: 1000,
		});
		const total = ref(0);
		const dialogFormVisible = ref(false);
		const dialogUp = ref(false);
		const dialogVisible = ref(false);
		const addtodeport = ref(false);
		const addtofirst = (row:any)=>{
			add.gid = row.gid
			addtodeport.value = true
		}

		const handleSizeChange = (a: number) => {
			queryForm.value.pagesize = a;
			queryForm.value.pagenum = 1;
			initGetgoodsList();
		};
		const handleCurrentChange = (a: number) => {
			queryForm.value.pagenum = a;
			initGetgoodsList();
		};

		const initGetgoodsList = async () => {
			const res = await getGoods(queryForm.value);
			tableData.value = res.data.value;
			total.value = res.data.total;
		};
		initGetgoodsList();

		const handleDialog = () => {
			dialogFormVisible.value = !dialogFormVisible.value;
		};

		const initaddgoods = async () => {
			dialogFormVisible.value = !dialogFormVisible.value;
			form.num = Number(form.num);
			await addGoods(form);
			initGetgoodsList();
			clear;
		};

		const form = reactive({
			gid: '',
			num: 0,
			car: '',
		});

		const updateDia = (row: any) => {
			form.gid = row.gid;
			form.car = row.car;
			form.num = Number(row.num);
			dialogUp.value = !dialogUp.value;
		};

		const updategoods = () => {
			dialogUp.value = !dialogUp.value;
			form.num = Number(form.num);
			upGoods(form);
			initGetgoodsList();
			clear;
		};

		const delgoods = (row: any) => {
			dialogVisible.value = true;
			form.gid = row.gid;
			form.num = row.num;
			form.car = row.car;
		};

		const delG = () => {
			dialogVisible.value = false;
			deGoods(form);
			initGetgoodsList();
			clear;
		};

		const clear = () => {
			form.gid = '';
			form.num = 0;
			form.car = '';
		};

		const add = reactive({
			sid: '',
			gid: '',
			did: '',
		});

		const addto = ()=>{
			addDeport(add)
			addtodeport.value = false
			initGetgoodsList()
		}
		const options = [
			{
				did: '0001',
			},
			{
				did: '0002',
			},
			{
				did: '0003',
			},
			{
				did: '0004',
			},
			{
				did: '0005',
			},
		];
		const formLabelWidth = '140px';
		return {
			handleSizeChange,
			handleCurrentChange,
			handleDialog,
			initaddgoods,
			updateDia,
			updategoods,
			delgoods,
			delG,
			initGetgoodsList,
			addto,
			addtofirst,
			formLabelWidth,
			queryForm,
			tableData,
			total,
			dialogFormVisible,
			form,
			dialogUp,
			dialogVisible,
			addtodeport,
			add,
			options,
		};
	},
	
});
</script>
<style></style>
